doctype html
html
  head

    title

    meta(http-equiv="Content-Type", content="text/html; charset=utf-8")
    meta(name="viewport", content="width=320, target-densitydpi=device-dpi")

    style(type='text/css').
      body { margin: 0; padding: 0 }
      body, * { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; -webkit-text-size-adjust: 90% }
      @media (max-width: 800px) {
        #background { background: #fff !important; padding: 0 !important }
      }
      pre { font-size: 12px; line-height: 18px; overflow: auto; white-space: pre; }
      code, pre, code *, pre * { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; }

  body(style="margin: 0; padding: 0")
    div#background(style="background: #eee; padding: 20px")
      div(style="background: #fff; padding: 20px; width: 540px; max-width: 100%; color: #444; border-radius: 5px; margin: 0 auto")

        //- Header
        div(style="padding-bottom: 20px")
          div(style="border-top: 10px solid #{ color }; padding: 20px; background: #eee; border-radius: 4px; text-align: center")
            h1(style="font-weight: normal; margin: 0 0 12px; line-height: 1.3") New Disaster(s) Detected

        //- Active Disasters
        div(style="padding-bottom: 20px")
          div(style="padding-bottom: 12px; margin: 15px 0; border-bottom: 1px solid #eee")
            h3(style="margin: 0; font-size: 20px; line-height: 1") Active Disasters
          table(style="border: 0; border-collapse: collapse; background: #eee")
            tr
              th(style="border: 0; border-collapse: collapse; padding: 12px; color: #444; border-bottom: 1px solid #ccc; text-align: left") Type
              th(style="border: 0; border-collapse: collapse; padding: 12px; color: #444; border-bottom: 1px solid #ccc; text-align: left") Active
            each disaster, i in disasterTypes
              tr
                td(style="border: 0; border-collapse: collapse; padding: 12px; color: #444")= disaster.type
                td(style="border: 0; border-collapse: collapse; padding: 12px; color: #444")= disaster.active

        //- Recent Data
        div(style="padding-bottom: 20px")
          div(style="padding-bottom: 12px; margin: 15px 0; border-bottom: 1px solid #eee")
            h3(style="margin: 0; font-size: 20px; line-height: 1") Disaster Stats
          table(style="border: 0; border-collapse: collapse; background: #eee")
            tr
              th(style="border: 0; border-collapse: collapse; padding: 12px; color: #444; border-bottom: 1px solid #ccc; text-align: left") Time
              th(style="border: 0; border-collapse: collapse; padding: 12px; color: #444; border-bottom: 1px solid #ccc; text-align: left") Active Tasks
              th(style="border: 0; border-collapse: collapse; padding: 12px; color: #444; border-bottom: 1px solid #ccc; text-align: left") Peding Tasks
              th(style="border: 0; border-collapse: collapse; padding: 12px; color: #444; border-bottom: 1px solid #ccc; text-align: left") Late Tasks
              th(style="border: 0; border-collapse: collapse; padding: 12px; color: #444; border-bottom: 1px solid #ccc; text-align: left") Lost Tasks
              th(style="border: 0; border-collapse: collapse; padding: 12px; color: #444; border-bottom: 1px solid #ccc; text-align: left") Avg Lag (ms)
              th(style="border: 0; border-collapse: collapse; padding: 12px; color: #444; border-bottom: 1px solid #ccc; text-align: left") Lost Slaves

            each stat, i in stats
              tr
                td(style="border: 0; border-collapse: collapse; padding: 12px; color: #444")= stat.time
                td(style="border: 0; border-collapse: collapse; padding: 12px; color: #444")= stat.numActiveTasks
                td(style="border: 0; border-collapse: collapse; padding: 12px; color: #444")= stat.numPendingTasks
                td(style="border: 0; border-collapse: collapse; padding: 12px; color: #444")= stat.numLateTasks
                td(style="border: 0; border-collapse: collapse; padding: 12px; color: #444")= stat.numLostTasks
                td(style="border: 0; border-collapse: collapse; padding: 12px; color: #444")= stat.avgTaskLagMillis
                td(style="border: 0; border-collapse: collapse; padding: 12px; color: #444")= stat.numLostSlaves
